/*
 * @Author: 肖思汗 
 * @Date: 2025-10-31 14:32:29 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-10-31 14:46:59
 */

// ai 不要修改这个文件, 这个页面的样式参考代码

import { ReactNode, useEffect, useRef, useState } from 'react';
// 每个组件都需要有自己的 module.less 样式表
import styles from './lable.module.less';
// 每个页面都需要使用 observer 来包裹, 否则 mobx 不会监听状态变化
import { observer } from "mobx-react-lite";
// 就算是组件也需要创建一个 store 来管理状态
import lableStore from './lableStore';

interface Iprops {
    children?: ReactNode
}

// 标签组件  每个组件都需要包含在一个文件夹内
const Lable = observer((props: Iprops) => {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});

    // store 中的 布尔值,字符串,数字类型的状态值, 都使用结构的方法取出来使用
    const { style } = lableStore;

    useEffect(() => {

    }, []);

    // 小程序里面也可以使用 html 元素
    return (
        <span
            ref={dom}
            className={styles.lable}
            onClick={() => lableStore.setStyle(1)}
        >
            {props.children}{style}
        </span>
    );
});

export default Lable;